<!-- 添加SKU商品Channel -->
<template>
  <div class="channel-box">
    <div class="my-table">
      <el-form :model="expandskuData" ref="channelForm">
        <el-table
          ref="multipleTable"
          :data="expandskuData.datas"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            prop="channelCode"
            label="渠道"
            min-width="100"
          ></el-table-column>
          <el-table-column align="center" label="税率" min-width="80">
            <template slot-scope="scope" v-if="scope.row">{{(scope.row.taxRate * 100).toFixed(2) + '%'}}</template>
          </el-table-column>
          <el-table-column align="center" label="税前价格" min-width="120">
            <template slot-scope="scope" v-if="scope.row">
              <span>
                {{ (scope.row.price / (1 + scope.row.taxRate)).toFixed(2) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="税后价格" min-width="120">
            <template slot-scope="scope" v-if="scope.row">
              <number-input
                :disabled="disabled"
                v-model="scope.row.price"
              ></number-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="税额" min-width="100">
            <template
              slot-scope="scope"
              v-if="scope.row"
            >{{(scope.row.price - (scope.row.price / (1 + scope.row.taxRate)).toFixed(2)).toFixed(2)}}</template>
          </el-table-column>
          <el-table-column align="center" label="积分金额" min-width="120">
            <template slot-scope="scope" v-if="scope.row">
              <number-input
                :disabled="disabled || isCreditsExchange==='0'"
                v-model="scope.row.integralAmount"
              ></number-input>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('productCenter.operation')" min-width="90">
            <template slot-scope="scope" v-if="scope.row">
              <el-button
                size="mini"
                :disabled="disabled"
                class="dark-btn"
                @click="handleDelete(scope.$index, scope.row)"
              >{{$t('delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import NumberInput from '@/components/NumberInput/index'
export default {
  name: 'SkuChannel',
  components: {
    NumberInput
  },
  props: {
    expandskuData: {
      type: Object,
      default: function () {
        return { datas: [] }
      }
    },
    tableIdx: {
      type: Number
    },
    channels: {
      type: Array
    },
    orgList: {
      type: Array
    },
    orgDatas: {
      type: Array
    },
    paymentType: {
      type: String
    },
    disabled: {
      type: Boolean
    },
    isCreditsExchange: {
      type: String
    }
  },
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      statusList: [],
      channelList: [],
      multipleSelection: []
    }
  },
  filters: {
    getPriceTax (row) {
      if (!row) return ''
      return parseFloat(Number(row.afterTaxPrice) - Number(row.preTaxPrice)).toFixed(2)
    },
    getMsrpTax (row) {
      if (!row) return ''
      return parseFloat(Number(row.afterTaxMsrp) - Number(row.preTaxMsrp)).toFixed(2)
    },
    getPriceMonthTax (row) {
      if (!row) return ''
      return parseFloat(Number(row.monthlyPrice) - Number(row.monthlyTaxExclusivePrice)).toFixed(2)
    }
  },
  methods: {
    preTaxMsrpChange (row, val) {
      const taxRate = row.taxRate
      row.afterTaxMsrp = parseFloat(
        Number(val) + Number(val) * taxRate
      ).toFixed(2)
      row.msrpTax = parseFloat(Number(val) * taxRate).toFixed(2)
    },
    afterTaxMsrpChange (row, val) {
      const taxRate = row.taxRate
      row.preTaxMsrp = parseFloat(Number(val) / (1 + taxRate)).toFixed(2)
      row.msrpTax = parseFloat(Number(val) - row.preTaxMsrp).toFixed(2)
    },
    preTaxPriceChange (row, val) {
      const taxRate = row.taxRate
      row.afterTaxPrice = parseFloat(
        Number(val) + Number(val) * taxRate
      ).toFixed(2)
      row.priceTax = parseFloat(Number(val) * taxRate).toFixed(2)
    },
    afterTaxPriceChange (row, val) {
      const taxRate = row.taxRate
      row.preTaxPrice = parseFloat(Number(val) / (1 + taxRate)).toFixed(2)
      row.priceTax = parseFloat(Number(val) - row.preTaxPrice).toFixed(2)
    },
    afterTaxPriceMonthChange (row, val) {
      const taxRate = row.taxRate
      // monthlyTaxExclusivePrice税前价
      row.monthlyTaxExclusivePrice = parseFloat(Number(val) / (1 + taxRate)).toFixed(2)
    },
    // 表格选中改变
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.expandskuData.datas.forEach(item => {
        item.enableFlag = false
        val.forEach(select => {
          if (select === item) {
            item.enableFlag = true
          }
        })
      })
    },
    // 输入框数据改变
    inputChange (val, index, type) {
      val = val.match(/^\d*(\.?\d{0,2})/g)[0] || null
      if (val < 0) {
        this.expandskuData.datas[index][type] = 0
      }
    },
    // 输入框失去焦点
    inputBlur (event, index, type) {
      const nowVal = this.expandskuData.datas[index][type]
      if (nowVal === '' || nowVal === null) return false
      if (type === 'price') {
        this.$set(
          this.expandskuData.datas[index],
          type,
          Number(nowVal).toFixed(2)
        )
      }
      if (type === 'stock') {
        this.$set(
          this.expandskuData.datas[index],
          type,
          Math.round(Number(nowVal))
        )
      }
    },
    // 删除一条数据
    handleDelete (index) {
      if (this.expandskuData.datas.length === 1) {
        this.$confirm(this.$t('productCenter.requireOneSku'), {
          confirmButtonText: this.$t('confirmOK'),
          showCancelButton: false
        })
        return false
      }
      this.$emit('removeSku', this.tableIdx, index)
    },
    // 添加新的一条
    addRow () {
      this.$emit('addSku', this.tableIdx)
    },
    // sku数据验证
    getChannelFormValid () {
      const forms = this.$refs.channelForm
      let canSave = true
      for (let i = 0; i < forms.length; i++) {
        forms[i].validate(valid => {
          if (!valid) {
            canSave = valid
          }
        })
      }
      return canSave
    },
    // 保存数据
    saveData () {
      const forms = this.$refs.channelForm
      let canSave = true
      for (let i = 0; i < forms.length; i++) {
        forms[i].validate(valid => {
          if (!valid) {
            canSave = valid
          }
        })
      }
      if (!canSave) return false
      this.$emit('saveData', this.tableIdx)
    }
  }
}
</script>
<style lang="scss" scoped>
.channel-box {
  /deep/ .el-input {
    margin-bottom: 0;
  }

  /deep/ .el-checkbox__label {
    font-size: 12px;
    padding-left: 5px;
  }
  .handle-box {
    margin-top: 30px;
  }
}
.table-title {
  border-bottom: 1px solid #ddd;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  b {
    font-size: 16px;
    color: red;
    margin-left: 5px;
  }
}
.table-body {
  margin-top: 10px;
  .handle-col {
    line-height: 3;
  }
}
</style>
